<template>
<div class="new-msg-list">
  <div class="new-msg-out" v-for="(item, index) in messageItem" :key="index">
    <img :src="item.userImg" alt="" class="new-msg-user-img">
    <div class="new-msg-in">
      <div class="new-msg-user">
        <span>昵称：{{item.userName}}</span>
        <span>{{item.putTime}}</span>
      </div>
      <div class="new-msg-cont">
        <p>{{item.userMessage}}</p>
        <msg-in-msg v-if="item.isInMsg" :inMessage="item.inMsg"/>
      </div>
      <div class="new-msg-btns clear-fix">
        <ul>

          <li>
            <div>
              <img v-if="badShow" src="~assets/img/common/cai.svg" alt="" @click="badActive">
              <img v-else src="~assets/img/common/cai_act.svg" alt="" @click="badActive">
            </div>
          </li>
          <li>
            <div>
              <img v-if="goodShow" src="~assets/img/common/zan.svg" alt=""  @click="goodActive">
              <img v-else src="~assets/img/common/zan_act.svg" alt="" @click="goodActive">
            </div>
          </li>
          <li>
            <div>
              <span class="new-msg-reply" v-if="!replyMsgBox.includes(index)" @click="replyMsg(index)">回复</span>
              <span class="new-msg-reply" v-else @click="cancelReplyMsg(index)">取消回复</span>
            </div>
          </li>
        </ul>
      </div>
      <message-box v-if="replyMsgBox.includes(index)"/>
    </div>
  </div>
  <paging :pageTotal="totalPage" @currentchange="handleCurrentChange" class="page"/>
</div>
</template>

<script>
import MsgInMsg from 'components/content/messagebox/MsgInMsg'
import MessageBox from 'components/content/messagebox/MessageBox'
import Paging from 'components/common/paging/Paging'

//数据模拟
import baby from 'assets/img/common/baby.png'
import {request} from 'network/request'
const userm = [{
  userImg: baby,
  userName: '用户名称',
  putTime: '2019-11-18',
  userMessage: '这是一条模拟数据',
  isInMsg: false,
  inMsg: null
},{
  userImg: baby,
  userName: '用户名称2',
  putTime: '2019-11-18',
  userMessage: '这是一条模拟数据2',
  isInMsg: true,
  inMsg: {
    userName: '用户名称3',
    putTime: '2019-11-18',
    userMessage: '这是一条模拟数据3',
  }
}]

export default{
  name: 'newMessage',
  components: {
    MsgInMsg,
    MessageBox,
    Paging
  },
  data () {
    return {
      badShow: true,      //初始化踩图标
      goodShow: true,     //初始化点赞图标
      replyMsgBox: [],    //回复框单独显示控制列表

    }
  },
  mounted(){
    /**
     * 初始化留言的列表
     */
    this.getMessageList()
  },
  props: {
    /* 初始化留言列表 */
    messageItem: {
      type: Array,
      default() {
        return userm
      }
    }
  },
  methods: {
    /* 点击踩切换高亮 */
    badActive() {
      this.badShow = !this.badShow
      this.goodShow = true
    },

    /* 点击赞切换高亮 */
    goodActive() {
      this.goodShow = !this.goodShow
      this.badShow = true
    },

    /* 显示回复框 */
    replyMsg(index) {
      this.replyMsgBox.push(index)
    },
    getMessageList(){
      request({
        url:'/message/getMessageList?page=' + 1,
        method:'get',
      }).then(response => {
        if(response.code === 20000){
          this.messageList = response.data
        }else{
          this.$message.error('获取留言失败')
        }
      }).catch(error => {
        this.$message.error('获取留言失败')
      })
    },
  /* 隐藏回复框 */
  cancelReplyMsg(index) {
      const currentIndex = this.replyMsgBox.indexOf(index)
      this.replyMsgBox.splice(currentIndex, 1)
  },

    //传上来当前页数，根据页数更改显示
    handleCurrentChange(cpage) {
      this.getBlogList(cpage)
    }
  }
}
</script>

<style scoped>
.new-msg-list{
  width: 100%;
  padding: 5px;
}
.new-msg-out{
  padding: 10px 0 10px;
  position: relative;
}
.new-msg-user-img{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 50px;
  height: 50px;
  margin-top: 10px;
}
.new-msg-in{
  padding-left: 65px;
}
.new-msg-user span{
  font-size: 13px;
  padding: 5px;
  color: #a1a1a1;
}
.new-msg-user span:nth-child(2){
  float: right;
}
.new-msg-cont p{
  white-space: pre-wrap;
  padding: 5px;
  width: 100%;
}
.new-msg-btns{
  padding-top: 10px;
}
.new-msg-btns ul li{
  float: right;
  margin-right: 30px;
}
.actshow{
  visibility: hidden;
}
.new-msg-reply{
  font-size: 12px;
  cursor: pointer;
}
.new-msg-reply:hover{
  color: #fd8585;
}
.msg-out{
  margin: 2px 2px 40px 2px;
}
</style>
